<!--
 * @Description:
 * @Author: sunye
 * @Date: 2022-02-11 17:57:07
 * @LastEditTime: 2022-02-15 14:44:56
-->
<template>
  <div class="container">
    <div class="head">
      <img src="../assets/img/head.png" alt="" />
      <div class="right-box">
        <div class="link cursor-pointer">
          <span> <i class="el-icon-caret-right"></i>区块链管理工具</span>
          <el-icon style="height: 1rem"
            ><caret-right style="height: 1rem"
          /></el-icon>
        </div>
        <div class="time">{{ localtime }}</div>
      </div>
    </div>
    <div class="body">
      <el-row :gutter="10">
        <el-col :span="6" class="h100">
          <card class="grid-content card1">
            <div class="card-title">全国智慧工地状况</div>
            <div class="card-body">
              <div class="item">
                <div class="">
                  <span class="value color-darkblue">{{
                    totalCountry.total
                  }}</span>
                  <span>个</span>
                </div>
                <div class="label">智慧工地总数</div>
              </div>
              <div class="item">
                <div class="">
                  <span class="value color-lightblue">{{
                    totalCountry.common + totalCountry.excellent
                  }}</span>
                  <span>个</span>
                </div>
                <div class="label">合格数</div>
              </div>
              <div class="item">
                <div class="">
                  <span class="value color-yellow">{{
                    totalCountry.unqualified
                  }}</span>
                  <span>个</span>
                </div>
                <div class="label">不合格数</div>
              </div>
            </div>
          </card>
          <card class="grid-content card2">
            <div class="card-title">全国智慧工地环境排名TOP5</div>
            <Chart2 />
          </card>
          <card class="grid-content card3">
            <div class="card-title">全国智慧环境变化趋势</div>
            <div class="card-body">
              <Chart3 />
            </div>
          </card>
        </el-col>
        <el-col :span="12" class="h100">
          <card class="grid-content card4">
            <div class="card-body">
              <div class="card-body-head">
                <div class="item border-lightblue bg-lightblue">
                  <div>
                    <span class="value color-lightblue">{{
                      computedExcellent
                    }}</span>
                    <span>%</span>
                  </div>
                  <div class="label">优</div>
                </div>
                <div class="item border-yellow bg-yellow">
                  <div>
                    <span class="value color-yellow">{{ computedCommon }}</span>
                    <span>%</span>
                  </div>
                  <div class="label">良</div>
                </div>
                <div class="item border-pink bg-pink">
                  <div>
                    <span class="value color-pink">{{
                      computedUnqualified
                    }}</span>
                    <span>%</span>
                  </div>
                  <div class="label">差</div>
                </div>
              </div>
              <div class="card-body-content">
                <Map v-if="true" />
                <Chart4 v-else />
              </div>
            </div>
          </card>
          <div class="box56">
            <card class="grid-content card5">
              <div class="card-title">环境告警信息</div>
              <div class="card-body">
                <div class="card-body-head">
                  <div class="item">
                    <span class="dot bg-lightblue-deep"></span>
                    <span class="label">优</span>
                  </div>
                  <div class="item">
                    <span class="dot bg-yellow-deep"></span>
                    <span class="label">良好</span>
                  </div>
                  <div class="item">
                    <span class="dot bg-pink-deep"></span>
                    <span class="label">差</span>
                  </div>
                </div>
                <div class="card-body-content">
                  <div class="header">
                    <span class="label">工地</span>
                    <span class="aqi">AQI</span>
                    <span class="wet">湿度</span>
                    <span class="pm25">PM2.5</span>
                    <span class="pm10">PM10</span>
                    <span class="tsp">TSP</span>
                    <span class="noise">噪音</span>
                  </div>
                  <div
                    class="list-item"
                    :class="{ [item.tag]: true }"
                    v-for="(item, index) in card5List"
                    :key="index"
                  >
                    <span class="label truncate">{{ item.name }}</span>
                    <span class="aqi" :title="item.AQI">{{ item.AQI }}</span>
                    <span class="wet" :title="item.湿度">{{ item.湿度 }}</span>
                    <span class="pm25" :title="item.PM25">{{ item.PM25 }}</span>
                    <span class="pm10" :title="item.PM10">{{ item.PM10 }}</span>
                    <span class="tsp" :title="item.TSP">{{ item.TSP }}</span>
                    <span class="noise" :title="item.噪音">{{
                      item.噪音
                    }}</span>
                  </div>
                </div>
              </div>
            </card>
            <card class="grid-content card6">
              <div class="card-title">环境舆情词云</div>
              <div class="card-body">
                <Chart6 /></div
            ></card>
          </div>
        </el-col>
        <el-col :span="6" class="h100">
          <card class="grid-content card7">
            <div class="card-body1">
              <div class="card-body-head">
                <div
                  v-for="(item, index) in card7Headers"
                  :key="index"
                  :class="{ active: active71 === index }"
                  @click="card71HeadersChange(index)"
                >
                  {{ item.label }}
                </div>
              </div>
              <div class="card-body-content">
                <div class="item">
                  <div class="">
                    <span class="value color-darkblue">{{
                      totalProvinceActive.total
                    }}</span>
                    <span>个</span>
                  </div>
                  <div class="label">智慧工地总数</div>
                </div>
                <div class="item">
                  <div class="">
                    <span class="value color-lightblue">{{
                      totalProvinceActive.common + totalProvinceActive.excellent
                    }}</span>
                    <span>个</span>
                  </div>
                  <div class="label">合格数</div>
                </div>
                <div class="item">
                  <div class="">
                    <span class="value color-yellow">{{
                      totalProvinceActive.unqualified
                    }}</span>
                    <span>个</span>
                  </div>
                  <div class="label">不合格数</div>
                </div>
              </div>
            </div>
            <div class="card-body2">
              <div class="card-title">江苏省智慧工地环境排名TOP5</div>
              <Chart72 />
            </div>
            <div class="card-body3">
              <div class="card-title">江苏省智慧环境变化趋势</div>
              <div class="card-body-content">
                <Chart73 />
              </div></div></card
        ></el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import Card from 'components/CardTemplate.vue'
import Chart2 from 'components/Chart2.vue'
import Chart3 from 'components/Chart3.vue'
import Chart4 from 'components/Chart4.vue'
import Chart6 from 'components/Chart6.vue'
import Chart72 from 'components/Chart72.vue'
import Chart73 from 'components/Chart73.vue'
import Map from 'components/Map.vue'
import dayjs from 'dayjs'
import { alarmInfo, enterprises, provinceCity, total, top, provinceTotal } from 'api/home.js'
export default {
  name: 'Main',
  components: {
    Card, Chart2, Chart3, Chart4, Chart6, Chart72, Chart73, Map
  },

  data () {
    return {
      timer: null,
      localtime: '',
      totalCountry: {},
      totalProvinceActive: {},
      totalJS: {},
      totalWX: {},
      totalSZ: {},
      totalCZ: {},
      totalXZ: {},
      card7Headers: [
        {
          label: '江苏省',
          value: 1
        },
        {
          label: '无锡',
          value: 2
        },
        {
          label: '苏州',
          value: 3
        },
        {
          label: '常州',
          value: 4
        },
        {
          label: '徐州',
          value: 5
        }
      ],
      card5List: [],
      active71: 0,
      active72: 0

    }
  },
  computed: {
    computedExcellent () {
      return (100 * this.totalCountry.excellent / this.totalCountry.total).toFixed(1)
    },
    computedCommon () {
      return (100 * this.totalCountry.common / this.totalCountry.total).toFixed(1)
    },
    computedUnqualified () {
      return (100 - this.computedExcellent - this.computedCommon).toFixed(1)
    }
  },
  watch: {
    totalJS (newV) {
      this.totalProvinceActive = newV
    }
  },
  async created () {
    this.card5List = await this.alarmInfo()

    this.provinceCity()
    this.provinceTotal('江苏省', '无锡市')
    this.provinceTotal('江苏省')
    this.provinceTotal('全国')
    this.totalCountry = await this.total('totalCountry')
    this.totalJS = await this.provinceTotal('江苏省')
    this.totalWX = await this.provinceTotal('江苏省', '无锡市')
    this.totalSZ = await this.provinceTotal('江苏省', '苏州市')
    this.totalCZ = await this.provinceTotal('江苏省', '常州市')
    this.totalXZ = await this.provinceTotal('江苏省', '徐州市')
    this.timer = setInterval(() => {
      this.localtime = dayjs().format('YYYY-MM-DD HH:mm')
    }, 1000)
  },
  methods: {
    card71HeadersChange (index) {
      this.active71 = index
      switch (index) {
        case 0:
          this.totalProvinceActive = this.totalJS
          break
        case 1:
          this.totalProvinceActive = this.totalWX
          break
        case 2:
          this.totalProvinceActive = this.totalSZ
          break
        case 3:
          this.totalProvinceActive = this.totalCZ
          break
        case 4:
          this.totalProvinceActive = this.totalXZ
          break
      }
    },
    alarmInfo () {
      const data = {
        page: 1,
        size: 5
      }
      return alarmInfo(data).then(res => {
        return res.result.records.map(i => ({
          ...i,
          噪音: Math.round(i.噪音),
          湿度: Math.round(i.湿度),
          AQI: Math.round(i.AQI),
          PM25: Math.round(i.PM25),
          PM10: Math.round(i.PM10),
          TSP: Math.round(i.TSP)
        }))
      })
    },
    provinceCity () {
      provinceCity().then(res => {
        // console.log('provinceCity', res.result)
      })
    },
    provinceTotal (province, city) {
      const data = {
        province,
        city
      }
      return provinceTotal(data).then(res => {
        return res.result[0]
      })
    },
    total () {
      return total().then(res => {
        return res.result[0]
      })
    }
    // enterprises () {
    //   enterprises().then(res => {
    //     // console.log('enterprises', res.result)
    //   })
    // }

  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>
